<template>
	<view class="header">
		<view class="avatar">
			<image :src="USER.avatar" mode=""></image>
		</view>
		<view class="nickname">
			<button type="default" v-if="!USER.nickname" open-type="getUserInfo" @getuserinfo="getUserInfo" >获取授权</button>
			<view class="wxnickname" v-else>{{ USER.nickname }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			USER() {
				return this.UserInfo
			},
			openid() {
				return this.$store.state.userData.openid
			}
		},
		data() {
			return {
				UserData: {}
			}
		},
		props: {
			UserInfo: Object
		},
		methods: {
			// 获取用户信息
			getUserInfo(  ) {
				let self = this 
				uni.getUserInfo({
					success( res) {
						console.log(res);
						if(res.userInfo) {
							let ret = res.userInfo
							self.UserData = {
								nickname: ret.nickName,
								avatar:ret.avatarUrl,
								openid: self.openid
							}
							self.SaveUser( self.UserData )
						}
					}
				})
			},
			
			// 保存用户信息
			async SaveUser( data ) {
				console.log(data);
				if(data) {
					let res = await this.$Request("/users/memberRegister",  data)
					console.log(res);
					let code = res.data.code
					if(code == 202) {
						this.$emit("update")
					}
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.header {
		width: 100%;
		box-sizing: border-box;
		background-color: green;
		padding: 20rpx 0;
		.avatar {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			overflow: hidden;
			margin: 10rpx auto;
			background-color: #fff;
			image {
				width: 150rpx;
				height: 150rpx;
			}
		}
		.nickname {
			color: #fff;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
			font-size: 30rpx;
			button {
				width: 200rpx;
				text-align: center;
				font-size: 30rpx;
			}
			.wxnickname {
				padding: 5rpx 0;
			}
		}
	}
</style>
